import {useState} from 'react'
export default ()=>{
    const [list,setList]=useState([1,2,3,4,5,6])

    return(<div style={{display:'flex'}}>
        {
            list.length>0&&list.map((item,index)=><div key={index} style={{
                width:'60px',
                height:'60px',
                borderRadius:'100%',
                display:'flex',
                justifyContent:'center',
                alignItems:'center',
                backgroundColor:'orange',
                margin:'10px'
            }}>
                {item}
            </div>)
        }
         <div style={{
                width:'60px',
                height:'60px',
                borderRadius:'100%',
                display:'flex',
                justifyContent:'center',
                alignItems:'center',
                border:'4px dashed #ccc',
                fontSize:'38px',
                margin:'10px',
                color:'#ccc'
            }} onClick={()=>{
                list.push(7)
                setList([...list])
            }}>
              +
            </div>
    </div>) 
}